<template>
  <div class="selectable-container">
    <div class="selectable-list--filter">
      <el-input size="small" v-model.trim="filterKey" placeholder="输入名称过滤" clearable />
    </div>
    <div class="selectable-list" v-if="filteredData.length">
      <div class="selectable-item" :class="{ 'is-active': item[this.nameField] === selected[nameField] }"
        v-for="item in filteredData" :key="item[this.nameField]">
        <span class="selectable-item--name" :title="item[titleField]" @click="onItemClick(item)"
          @dblclick="onItemDblClick(item)">
          <slot :data="item">{{ item[this.nameField] }}</slot>
        </span>
      </div>
    </div>
    <div class="selectable-list--empty" v-else>
      <span>暂无数据</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "SelectableList",
  props: {
    data: {
      type: Array,
      default: () => ([])
    },
    selected: Object,
    nameField: String,
    titleField: String,
    filterFileds: Array
  },
  data() {
    return {
      filterKey: ''
    }
  },
  computed: {
    orderedData() {
      const list = [...this.data]
      list.sort((a, b) => a[this.nameField]?.toLowerCase() > b[this.nameField]?.toLowerCase() ? 1 : -1)
      return list
    },
    filteredData() {
      if (!this.filterKey) {
        return this.orderedData
      }
      const filterKey = this.filterKey.toLowerCase()
      const filterFields = [this.nameField]
      if (this.filterFileds && this.filterFileds.length) {
        filterFields.push(...this.filterFileds)
      }

      return this.orderedData.filter(item => {
        for (const key in item) {
          if (filterFields.indexOf(key) === -1) {
            continue
          }
          const val = item[key]
          if (!val) {
            continue
          }
          if (val.toString().toLowerCase().indexOf(filterKey) !== -1) {
            return true
          }
        }
        return false
      })
    }
  },
  methods: {
    onItemClick(item) {
      this.$emit('update:selected', item)
    },
    onItemDblClick(item) {
      this.$emit('item-dblclick', item)
    }
  }
}
</script>

<style lang="less" scoped>
.selectable-container {
  height: 100%;
  display: flex;
  background-color: #ffffff;
}

.selectable-list--filter {
  padding: 5px;
  height: 40px;
  flex: 0 0 auto;
}

.selectable-list {
  flex: 1 1 auto;
  position: relative;
  height: 100%;
  overflow: auto;
  margin: 0;
  box-sizing: border-box;
  padding: 10px;
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  font-size: 13px;
  color: #376529;
  font-family: Consolas, Arial, serif;
  outline: none;
}

.selectable-item--name {
  padding: 5px;
  cursor: default;
  display: inline-block;
  transition: color 618ms, background-color 618ms;
  border-radius: 2px;

  &:hover {
    color: #ec2ab1;
  }
}

.selectable-item {
  &.is-active {
    .selectable-item--name {
      background-color: #376529;
      color: #ffffff;
    }
  }
}

.selectable-list--empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888888;
  font-size: 12px;
}
</style>
